import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';

import { HttpRequest } from "../../../service/httpRequest";

declare var $:any;

@Component({
  selector: 'chart-power',
  template: `

        <div id="power" style="height:400px;width: 90%"></div>

  `
})
export class PowerComponent implements OnInit, OnChanges{
  @Input() public date:any;
  option;
  myPower:any;
  constructor() { }

  ngOnInit() {

    this.paintPower();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if(changes.date.currentValue == undefined) return;
    this.getData(changes.date.currentValue.type);
  }

  getData(type){
    switch(type){
      case 'year':
        this.power([
          ['2016',3000],
          ['2017',0],
          ['2018',0],
          ['2019',0],
          ['2020',0]
        ]);
        break;
      case 'month':
        this.power([
          ['1',300],
          ['2',200],
          ['3',100],
          ['4',600],
          ['5',700],
          ['6',500],
          ['7',200],
          ['8',400],
          ['9',600],
          ['10',0],
          ['11',0],
          ['12',0]

        ]);
        break;
      case 'day':
        this.power([
          ['1',10],
          ['2',20],
          ['3',40],
          ['4',14],
          ['5',55],
          ['6',30],
          ['7',15],
          ['8',4],
          ['9',13],
          ['10',20],
          ['11',22],
          ['12',32],
          ['13',23],
          ['14',67],
          ['15',99],
          ['16',32],
          ['17',23],
          ['18',42],
          ['19',65],
          ['20',56],
          ['21',87],
          ['22',5],
          ['23',31],
          ['24',98],
          ['25',150],
          ['26',176],
          ['27',78],
          ['28',73],
          ['29',44],
          ['30',56],
          ['31',89]
        ]);
        break;
      case 'hour':
        this.power([
          ['1',12],
          ['2',25],
          ['3',12],
          ['4',43],
          ['5',41],
          ['6',21],
          ['7',16],
          ['8',63],
          ['9',16],
          ['10',34],
          ['11',15],
          ['12',21],
          ['13',67],
          ['14',14],
          ['15',26],
          ['16',63],
          ['17',13],
          ['18',100],
          ['19',12],
          ['20',12],
          ['21',32],
          ['22',42],
          ['23',15],
          ['24',21]
        ])
            break;
    }

  }

  paintPower(){

    let date = new Date();
    let ofday = date.getDate();
    let ofmonth = date.getMonth()+1;
    let ofyear = date.getFullYear();
    let time = ofyear + '-' + ofmonth  + '-' + ofday;

    let datainit = [
      ['1',18],
      ['2',40],
      ['3',19],
      ['4',20],
      ['5',17],
      ['6',23],
      ['7',14],
      ['8',11],
      ['9',12],
      ['10',55],
      ['11',90],
      ['12',100],
      ['13',40],
      ['14',50],
      ['16',90],
      ['17',80],
      ['18',34],
      ['19',89],
      ['20',56],
      ['21',67],
      ['22',90],
      ['23',10],
      ['24',5]
    ];
    this.power(datainit);
  }

  power(data){
    $('#power').highcharts({
      chart: {
        type: 'column'
      },
      title: {
        text: '用电量（Electricity Consumption）'
      },
      subtitle: {
        text: '用电量的统计：提供三种方式：日、月、年（Electricity consumption statistics (day, month, year)）'
      },
      xAxis: {
        type: 'category',
        labels: {
          rotation: -45,
          style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
          }
        }
      },
      yAxis: {
        min: 0,
        title: {
          text: '用电量 (KWH)（Electricity consumption）'
        }
      },
      legend: {
        enabled: false
      },
      tooltip: {
        pointFormat: '用电量（Electricity consumption）: <b>{point.y} KWH</b>'
      },
      series: [{
        color:'#27c24c',
        name: '用电量（Electricity consumption）',
        data: data,
        dataLabels: {
          enabled: true,
          rotation: -90,
          color: '#FFFFFF',
          align: 'right',
          format: '{point.y}', // one decimal
          y: 10, // 10 pixels down from the top
          style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
          }
        }
      }]
    });
  }

}
